<template>
  <div class="box">
    <div id="left">
        <el-tree   default-expand-all
        :data="departments" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    <div class="right">
        <el-button class="btn-add" type="primary"
                    @click="dialogFormVisible = true; form = {}">新增人员</el-button>
        <div>
            <el-radio v-model="status" label="1" @change="changeStatus" border>全部人员</el-radio>
            <el-radio v-model="status" label="2" @change="changeStatus"  border>离职人员</el-radio>
        </div>
        <el-table
            :data="users"
            border
            style="width: 100%">

            
            <el-table-column
            prop="name"
            label="人员姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="code"
            label="人员编号"
            width="180">
            </el-table-column>
            <el-table-column
            prop="sex"
            label="性别">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="手机号">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱">
            </el-table-column>
            <el-table-column
            prop="departmentName"
            label="所属部门">
            </el-table-column>
            <el-table-column
            prop="roleName"
            label="角色">
            </el-table-column>
            <el-table-column
                label="角色">
                <template slot-scope="scope">
                    <span  v-for="(item,index) in scope.row.roles" :key="item.id" >
                        <span v-if="index != 0">,</span>{{ item.name }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
            prop="status"
            label="默认系统">
            </el-table-column>
        </el-table>

            <!-- <el-dialog title="新增人员" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="手机号(登录账号)">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码">
                        <el-input v-model="form.suppli" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="form.contactName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-input v-model="form.contactPhone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="form.contactEmail" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.contactJob" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属部门">
                        <el-col>
                            <el-cascader style="width: 100%" clearable size="large" :options="regionDatas"
                                ref="cascaderAddr" :props="cateProps" v-model="form.address1" @change="handleChange">
                            </el-cascader>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sysUser">确 定</el-button>
                </div>
            </el-dialog> -->
    </div>
  </div>
</template>

<script>
import { sysDepartments,sysUser } from "@/api/role";
export default {
    data(){
        return { 
            dialogFormVisible: false,
            departments:[],
            defaultProps: {
                children: 'departments',
                label: 'name'
            },
            users:[],
            status:"全部人员",
            userParams:{
                departmentId:0,
                status:null
            }
        }
    },
    methods:{
        handleNodeClick(data) {
            this.userParams.departmentId = data.id;
            this.getUsers();
        },
        getDepartments(){
            let that = this;
            sysDepartments().then(res=>{
                that.departments = res.data.data;
            })
        },
        getUsers(){
            let that = this;
            sysUser(this.userParams).then(res=>{
                that.users = res.data.data;
            })
        },
        changeStatus(){
            if(this.status == 1){
                this.userParams.status = null;
            }else{
                this.userParams.status = "离职";
            }
            this.getUsers();
        }
    },
    mounted(){
        this.getDepartments();
        this.getUsers();
    }

}
</script>

<style scoped>
.box{
    display: flex;
}
.btn-add {
    position: absolute;
    right: 10px;
}
</style>